{% extends 'base.html' %}
{% load staticfiles %}
{%block custom_css%}
<style>
    .btn-edit,
    .btn-edit:hover {
        color: #337ab7;
    }

    #input-form {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }

    #demo1 {
        display: none;
        position: fixed;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 540px;
        height: 260px;
        background-color: rgba(255, 255, 255, 1);
        z-index: 1002;
        padding: 0px 20px 0px 20px;
    }

    .ion-close-round:before {
        content: "X";
    }

    .close-btn {
        float: right;
        cursor: pointer;
        opacity: .4;
        margin-top: 20px;
    }

    .close-btn:hover {
        opacity: 1;
    }

    .form1 {
        margin-left: 10px;
    }
</style>
{%endblock%}

{% block content %}

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    {%if user.type <= 1%}
    <h2 class="page-header">添加新房间类型</h2>
    <div>
        <form class="form-horizontal" method="POST" action="/room_type">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">编号</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="num" id="inputEmail3">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">房间类型</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="room_type" id="inputEmail3">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">价格</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="price" id="inputPassword3">
                </div>
            </div>
            {% csrf_token %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </div>
        </form>

    </div>
    {%endif%}
    <h2 class="sub-header">房间类型</h2>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>房间类型</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for room_type in room_types%}
                <tr>
                    <td>{{room_type.type_num}}</td>
                    <td>{{room_type.name}}</td>
                    <td id="price_{{room_type.id}}">{{room_type.price}}</td>
                    <!-- <td><a type="button" class="btn btn-default bta" href="/room_type/edit?id={{room_type.id}}">编辑</a> -->
                    <td><button class="btn btn-default btn-edit" type="button" value="{{room_type.id}}">编辑</button></td>
                    </td>
                </tr>
                {%endfor %}

            </tbody>
        </table>
    </div>
</div>

<div id="input-form">
</div>
<div id="demo1">
    <div style="margin-bottom:30px;">
        <h3 style="float:left;">修改房间价格</h3>
        <div><span title="关闭" class="close-btn ion-close-round"></span></div>
        <div style="clear:both;"></div>
    </div>
    <form class="form-horizontal form1" method="POST" action="/change_roomstatus">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">房间类型</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="room_num" id="input1" readonly>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">价格</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="room_num" id="room-price">
            </div>
        </div>
        <input type="hidden" name="id" id="hidden-id">
        {% csrf_token %}
        <div class="form-group">
            <div class="col-sm-offset-8 col-sm-2">
                <button type="button" class="btn btn-primary btn-add">提交</button>
            </div>
        </div>
    </form>
</div>

<script>
    $(".btn-edit").click(function () {
        var room_num = $(this).parent().parent().children('td:nth-child(2)').text()
        $("#input1").val(room_num)
        $("#hidden-id").val($(this).val())
        $("#input-form").show()
        $("#demo1").show()
    })
    $(".close-btn").click(function () {
        $("#input-form").hide()
        $("#demo1").hide()
    })
    $(".btn-add").click(function () {
        var id = $('#hidden-id').val()
        var price = $('#room-price').val()
        $.ajax({
            type: "POST",
            url: "/change_price",
            data: {
                id: id,
                price: price,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (result) {
                if (result.status == 'ok') {
                    $("#price_" + id).text(price)
                }
            }
        })

        $("#input-form").hide()
        $("#demo1").hide()
    })
</script>

{% endblock %}